<template>
    <el-card>
        <div class="header-bar">
            <span class="title">设备信息管理</span>
            <el-input v-model="search.keyword" placeholder="设备编号/名称" size="small" style="width:180px;margin-right:10px;"
                clearable />
            <el-select v-model="search.group" placeholder="分组" size="small" style="width:140px;margin-right:10px;"
                clearable>
                <el-option v-for="g in groupOptions" :key="g" :label="g" :value="g" />
            </el-select>
            <el-select v-model="search.status" placeholder="状态" size="small" style="width:120px;margin-right:10px;"
                clearable>
                <el-option label="在用" value="在用" />
                <el-option label="停用" value="停用" />
                <el-option label="维修中" value="维修中" />
            </el-select>
            <el-button type="primary" size="small" @click="onAdd">新增设备</el-button>
        </div>
        <el-table :data="filteredList" border style="width:100%;margin-top:26px;"  height="500px" :row-key="row => row.id">
            <el-table-column prop="id" label="设备编号" width="130" />
            <el-table-column prop="name" label="设备名称" min-width="120" />
            <el-table-column prop="group" label="分组" width="100" />
            <el-table-column prop="status" label="状态" width="90" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="product" label="所属产品" width="120" />
            <el-table-column label="图片" width="80">
                <template #default="{ row }">
                    <el-image v-if="row.img" :src="row.img" fit="cover"
                        :style="{ width: '36px', height: '36px', borderRadius: '6px' }" preview-teleported />
                </template>
            </el-table-column>
            <el-table-column prop="location" label="位置" width="110" />
            <el-table-column prop="remark" label="备注" min-width="100" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button size="small" @click="onEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editVisible" :title="editForm.id ? '编辑设备' : '新增设备'">
            <el-form :model="editForm" label-width="90px">
                <el-form-item label="设备编号">
                    <el-input v-model="editForm.id" />
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input v-model="editForm.name" />
                </el-form-item>
                <el-form-item label="分组">
                    <el-select v-model="editForm.group">
                        <el-option v-for="g in groupOptions" :key="g" :label="g" :value="g" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editForm.status">
                        <el-option label="在用" value="在用" />
                        <el-option label="停用" value="停用" />
                        <el-option label="维修中" value="维修中" />
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="editForm.type" />
                </el-form-item>
                <el-form-item label="所属产品">
                    <el-input v-model="editForm.product" />
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="editForm.img" placeholder="可填写图片URL" />
                </el-form-item>
                <el-form-item label="位置">
                    <el-input v-model="editForm.location" placeholder="如：A区-1楼-手术室" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editForm.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="onSave">保存</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 设备分组可选项
const groupOptions = [
    '急诊科', '手术室', 'ICU重症监护室', '放射科', '检验科', '内科', '外科', '体检中心'
]

// 模拟设备数据
const deviceList = ref([
    {
        id: 'EQ-202406-0001',
        name: '注射泵A',
        group: '急诊科',
        status: '在用',
        type: '输注设备',
        product: '智能注射泵',
        img: 'https://img.yzcdn.cn/vant/cat.jpeg',
        location: '总院区-急诊科',
        remark: ''
    },
    {
        id: 'EQ-202406-0002',
        name: '心电监护仪B',
        group: 'ICU重症监护室',
        status: '在用',
        type: '监护设备',
        product: '心电监护仪',
        img: '',
        location: '总院区-ICU',
        remark: '重点监护'
    },
    {
        id: 'EQ-202406-0003',
        name: 'CT机',
        group: '放射科',
        status: '维修中',
        type: '影像设备',
        product: '螺旋CT',
        img: '',
        location: '总院区-放射科',
        remark: ''
    },
    {
        id: 'EQ-202406-0004',
        name: '化学发光分析仪',
        group: '检验科',
        status: '在用',
        type: '检验设备',
        product: '化学发光分析仪',
        img: '',
        location: '总院区-检验科',
        remark: ''
    },
    {
        id: 'EQ-202406-0005',
        name: '麻醉机',
        group: '手术室',
        status: '在用',
        type: '手术设备',
        product: '麻醉机',
        img: '',
        location: '总院区-手术室',
        remark: ''
    },
    {
        id: 'EQ-202406-0006',
        name: '彩超仪C',
        group: '体检中心',
        status: '停用',
        type: '影像设备',
        product: '彩超仪',
        img: '',
        location: '分院区-体检中心',
        remark: ''
    },
    {
        id: 'EQ-202406-0007',
        name: '血透机',
        group: '内科',
        status: '在用',
        type: '治疗设备',
        product: '血液透析机',
        img: '',
        location: '分院区-内科',
        remark: ''
    },
    {
        id: 'EQ-202406-0008',
        name: '输液泵B',
        group: '外科',
        status: '维修中',
        type: '输注设备',
        product: '智能输液泵',
        img: '',
        location: '分院区-外科',
        remark: ''
    }
])

// 查询与过滤
const search = reactive({ keyword: '', group: '', status: '' })
const filteredList = computed(() => {
    return deviceList.value.filter(row => {
        const matchKey =
            !search.keyword ||
            row.id.includes(search.keyword) ||
            row.name.includes(search.keyword)
        const matchGroup = !search.group || row.group === search.group
        const matchStatus = !search.status || row.status === search.status
        return matchKey && matchGroup && matchStatus
    })
})

// 弹窗
const editVisible = ref(false)
const editForm = reactive({
    id: '',
    name: '',
    group: '',
    status: '在用',
    type: '',
    product: '',
    img: '',
    location: '',
    remark: ''
})

function onAdd() {
    Object.assign(editForm, {
        id: '',
        name: '',
        group: '',
        status: '在用',
        type: '',
        product: '',
        img: '',
        location: '',
        remark: ''
    })
    editVisible.value = true
}
function onEdit(row) {
    Object.assign(editForm, row)
    editVisible.value = true
}
function onSave() {
    if (!editForm.id || !editForm.name) {
        ElMessage.warning('设备编号和名称必填')
        return
    }
    const idx = deviceList.value.findIndex(item => item.id === editForm.id)
    if (idx !== -1) {
        deviceList.value[idx] = { ...editForm }
        ElMessage.success('编辑成功')
    } else {
        deviceList.value.push({ ...editForm })
        ElMessage.success('新增成功')
    }
    editVisible.value = false
}
function onDelete(row) {
    deviceList.value = deviceList.value.filter(item => item.id !== row.id)
}
</script>

<style scoped>
.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}
</style>
